import React, { useState } from 'react'
import { Modal, Toast } from 'antd-mobile'
import { withRouter } from 'react-router-dom'
import { apply, getIdCardUploadUrl } from '../../request/home'

Toast.config({ duration: 2, mask: false })

function CheckInformation(props) {
  const { visible, close, formData, token, setErrorMessage, setIdcardUploadUrl, setOrderNo, showHelpOrder} = props
  const [isLoading, setIsLoading] = useState(false)

  const onSubmit = async() => {
    if (isLoading) {
      return true
    }
    setIsLoading(true)
    Toast.loading('提交中', 60, null, true)
    close()
    const { code, message, data } = await apply({
      phone: formData.phone,
      new_phone: formData.new_phone,
      true_name: formData.true_name,
      idcard: formData.idcard,
      province_code: formData.cardAddress[0],
      city_code: formData.cardAddress[1],
      express_province_code: formData.cardAddress[0],
      express_province: formData.cardAddressText[0],
      express_city_code: formData.expressAddress[0],
      express_city: formData.expressAddressText[0],
      express_district_code: formData.expressAddress[1],
      express_district: formData.expressAddressText[1],
      express_address: formData.address,
      token,
      partner_goods_code: formData.code,
      url_query_string: formData.url_query_string
    }, formData.url_param)
    setIsLoading(false)
    Toast.hide()

    if (code) {
      if (code === 1002110) {
        setErrorMessage(message)
      } else if (code === 1002112) {
        setOrderNo(data.order_no)
        showHelpOrder()
      } else if (code === 1002113) {
        setOrderNo(data.order_no)
        props.history.push({ pathname: `/chinanet/recommend/${data.order_no}?code=${formData.code}` })
        return true
      } else {
        Toast.info('提交失败，请稍后重试')
      }
      return false
    }
    if (data.oao_model) { // 下单成功
      props.history.push({ pathname: `/success/${formData.code}` })
    } else { // 下单成功，需要上传地址证件
      setIsLoading(true)
      Toast.loading('提交中', 60, null, true)
      const res = await getIdCardUploadUrl({
        third_order_no: data.third_order_no,
        new_phone: formData.new_phone,
        token
      }, formData.url_param)
      Toast.hide()
      setIsLoading(false)
      if (res.code) {
        Toast.info('下单成功，获取证件上传地址失败')
        return false
      }
      setIdcardUploadUrl(res.data)
      close()
    }
  }

  return (
    <div className="check-information">
      <Modal
        visible={visible}
        onClose={close}
        transparent
        closable
        title="信息核对"
        className="check-information--modal"
      >
        <div className="check-form">
          <div className="check-form-item">
            <div className="label">订购卡品</div>
            <div className="input">
              <input type="text" readOnly={true} value={formData.page_name}/>
            </div>
          </div>
          <div className="check-form-item">
            <div className="label">归属地</div>
            <div className="input">
              <input type="text" readOnly={true} value={formData.cardAddressText.join(' ')}/>
            </div>
          </div>
          <div className="check-form-item">
            <div className="label">订购号码</div>
            <div className="input">
              <input type="text" readOnly={true} value={formData.new_phone}/>
            </div>
          </div>
          <div className="check-form-item">
            <div className="label">用户姓名</div>
            <div className="input">
              <input type="text" readOnly={true} value={formData.true_name}/>
            </div>
          </div>
          <div className="check-form-item">
            <div className="label">联系电话</div>
            <div className="input">
              <input type="text" readOnly={true} value={formData.phone}/>
            </div>
          </div>
          <div className="check-form-item">
            <div className="label">收货地址</div>
            <div className="input">
              <textarea readOnly={true} value={formData.expressAddressText.join(' ') + ' ' + formData.address}/>
            </div>
          </div>
        </div>
        <div className="footer">
          <span onClick={close}>修改</span>
          <span onClick={onSubmit}>{isLoading ? '提交中...' : '提交'}</span>
        </div>
      </Modal>
    </div>
  )
}

export default withRouter(CheckInformation)
